<template>
	<div>
		<BugHeader @saveBugCallback="saveBugCallback"></BugHeader>
		<BugList :bugList="bugList" @selectAllCallback="selectAllCallback"></BugList>
		<BugFooter :bugList="bugList" @clearResolvedCallback="clearResolvedCallback"></BugFooter>
	</div>
</template>

<script>

import pubsub from 'pubsub-js'
import BugHeader from './components/BugHeader.vue';
import BugList from './components/BugList.vue';
import BugFooter from './components/BugFooter.vue';

export default {
	name: 'App',  // 设置Vue开发者工具中显示的组件的名
	data() {
		return {
			bugList: [
				{ id: '001', desc: 'Bug描述信息1', resolved: false },
				{ id: '002', desc: 'Bug描述信息2', resolved: true },
				{ id: '003', desc: 'Bug描述信息3', resolved: true }
			]
		}
	},
	mounted() {
		// 订阅消息
		this.pid1 = pubsub.subscribe('modifyResolvedCallBack', this.modifyResolvedCallBack)
		this.pid2 = pubsub.subscribe('deleteByIdCallBack', this.deleteByIdCallBack)
		this.pid3 = pubsub.subscribe('updateDescCallback', this.updateDescCallback)
	},
	// 非常重要的行为习惯
	beforeDestroy() {
		// 当前组件销毁前，要手动将解绑总线上的事件解绑掉
		pubsub.unsubscribe(this.pid1)
		pubsub.unsubscribe(this.pid2)
		pubsub.unsubscribe(this.pid3)
	},
	methods: {
		// 保存bug对象的回调方法
		saveBugCallback(bug) {
			this.bugList.unshift(bug)
		},
		// 修改某个bug对象的resolved值
		modifyResolvedCallBack(messageName, bugId) {
			this.bugList.forEach((bug) => {
				if (bug.id === bugId) {
					bug.resolved = !bug.resolved
				}
			})
		},
		// 删除数组中某个bug对象：根据id
		deleteByIdCallBack(messageName, bugId) {
			// fiflter方法返回全新的方法
			this.bugList = this.bugList.filter((bug) => {
				return bug.id != bugId
			})
		},
		// 全选或取消全选
		selectAllCallback(flag) {
			this.bugList.forEach(bug => bug.resolved = flag)
		},
		// 清理已解决
		clearResolvedCallback() {
			this.bugList = this.bugList.filter((bug) => {
				return !bug.resolved
			})
		},
		// 失去焦点，修改描述信息
		updateDescCallback(messageName, bugObj) {
			this.bugList.forEach(bug => {
				if (bug.id === bugObj.id) {
					bug.desc = bugObj.desc
					return
				}
			})
		}
	},
	// 注册组件
	components: {
		BugHeader, BugList, BugFooter
	}
}
</script>

<style>
/* 共享 */
.button {
	display: inline-block;
	*display: inline;
	zoom: 1;
	padding: 6px 20px;
	margin: 0;
	cursor: pointer;
	border: 1px solid #bbb;
	overflow: visible;
	font: bold 13px arial, helvetica, sans-serif;
	text-decoration: none;
	white-space: nowrap;
	color: #555;
	background-color: #ddd;
	background-image: -webkit-gradient(linear, to right top, to right bottom, from(rgba(255, 255, 255, 1)), to(rgba(255, 255, 255, 0)));
	background-image: -webkit-linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
	background-image: -moz-linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
	background-image: -ms-linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
	background-image: -o-linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
	background-image: linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
	-webkit-transition: background-color .2s ease-out;
	-moz-transition: background-color .2s ease-out;
	-ms-transition: background-color .2s ease-out;
	-o-transition: background-color .2s ease-out;
	transition: background-color .2s ease-out;
	background-clip: padding-box;
	/* Fix bleeding */
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	-moz-box-shadow: 0 1px 0 rgba(0, 0, 0, .3), 0 2px 2px -1px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .3) inset;
	-webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, .3), 0 2px 2px -1px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .3) inset;
	box-shadow: 0 1px 0 rgba(0, 0, 0, .3), 0 2px 2px -1px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .3) inset;
	text-shadow: 0 1px 0 rgba(255, 255, 255, .9);
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.button:active {
	background: #e9e9e9;
	position: relative;
	top: 1px;
	text-shadow: none;
	-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .3) inset;
	-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .3) inset;
	box-shadow: 0 1px 1px rgba(0, 0, 0, .3) inset;
}

.button.red {
	color: #fff;
	text-shadow: 0 1px 0 rgba(0, 0, 0, .2);
	background-image: -webkit-gradient(linear, to right top, to right bottom, from(rgba(255, 255, 255, .3)), to(rgba(255, 255, 255, 0)));
	background-image: -webkit-linear-gradient(to bottom, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0));
	background-image: -moz-linear-gradient(to bottom, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0));
	background-image: -ms-linear-gradient(to bottom, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0));
	background-image: -o-linear-gradient(to bottom, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0));
	background-image: linear-gradient(to bottom, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0));
}

.button.red {
	background-color: #ca3535;
	border-color: #c43c35;
}

.button.red:hover {
	background-color: #ee5f5b;
}

.button.red:active {
	background: #c43c35;
}

.button.green {
	background-color: #57a957;
	border-color: #57a957;
}

.button.green:hover {
	background-color: #62c462;
}

.button.green:active {
	background: #57a957;
}
</style>
